<template>
	<view class="uni-login-box" :style="!show ? 'z-index:-1;opacity:0' : 'z-index:9999999999;opacity:1'" @tap="refuse">
		<view class=uni-login-white @tap.stop="">
			<view class="uni-login-title">微信授权</view>
			<image src="https://jy-shops.oss-cn-beijing.aliyuncs.com/client/logo.png" mode="widthFix" class='uni-login-logo'></image>
			<view class="uni-login-txt">风向铭品申请获取以下权限</view>
			<view class="uni-login-msg">
				<view class="uni-login-dian"></view>
				<text>{{get_mobile ? '获得你的手机号' : '获得你的公开信息（昵称、头像等）'}}</text>
			</view>
			<view class="uni-login-btn">
				<button class='uni-login-btn-refuse' @tap="refuse">拒绝</button>
				<button class='uni-login-btn-agree' v-if="!get_mobile" @tap="getUserInfo" withCredentials="true" lang="zh_CN">允许</button>
				<button type="primary" v-else class='uni-login-btn-agree'open-type="getPhoneNumber" @getphonenumber="wxGetPhone">允许</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {xcxLogin , xcxMobile , xcxReg} from '@/common/login.js';
	
	export default{
		data(){
			return {
				show : false,
				session_key : '',
				user_info : {},
				get_mobile : false
			}
		},
		methods:{
			refuse(){
				this.show = false;
				this.$emit('error')
			},
			/**
			 * 获取手机号
			 */
			wxGetPhone(e){
				if (e.detail) {
					var encryptedData = e.detail.encryptedData;
					var iv = e.detail.iv;
					if (encryptedData && iv) {
						uni.showLoading({
							title:'正在获取手机号'
						});
						xcxMobile({
							iv:iv,
							encryptedData:encryptedData,
							session_key : this.session_key
						}).then((res) =>{
							if(res.code) {
								this.user_info.mobile = res.msg.purePhoneNumber;
								var data_temp = {
									mobile: this.user_info.mobile, //手机号
									nick_name: this.user_info.nickName, //昵称
									openid_wechat: this.user_info.openid_wechat, //openid
									sex: this.user_info.gender, //性别
									avatar: this.user_info.avatarUrl, //头像
									province: this.user_info.province, //省
									city: this.user_info.city, //市
									unionid: this.user_info.unionid //unionid
								};
								xcxReg(data_temp).then((res) =>{
									uni.hideLoading();
									if(res.code) {
										this.toast('登录成功');
										uni.setStorageSync('token',res.msg);
										this.show = false;
										this.$emit('success');
									} else {
										this.toast(res.msg);
										this.$emit('error')
									}
								});
							}
						});
					} else {
						this.toast('获取手机号失败');
						this.$emit('error')
					}
				}
			},
			
			/**
			 * 获取用户信息
			 * @param {Object} res
			 */
			getUserInfo(){
				uni.getUserProfile({
					desc:'用于完善会员资料',
					success: (item) => {
					   console.log(item);
					    var iv = item.iv;
						var encryptedData = item.encryptedData;
						this.user_info = item.userInfo;
						uni.login({
							provider: 'weixin',
							success: (res) => {
								uni.showLoading({
									title:'正在登录'
								})
								xcxLogin({
									code : res.code,
									iv:iv,
									encryptedData:encryptedData
								}).then((res)=>{
									uni.hideLoading();
									if(res.code) {
										this.toast('登录成功');
										this.show = false;
										uni.setStorageSync('token',res.msg);
										this.$emit('success');
									} else {
										this.toast('再次点击获取手机号');
										this.user_info.openid_wechat = res.msg.openid;
										this.user_info.unionid = res.msg.unionid;
										this.session_key = res.msg.session_key;
										this.get_mobile = true;
									}
								});
							},
							fail: () => {
								this.toast('授权失败');
								this.$emit('error')
							}
						})
				    }
				})
			}
			// getUserInfo(res){
			// 	if(!res.detail.iv){
			// 		this.toast('您取消了授权，登录失败');
			// 	} else {
			// 		var iv = res.detail.iv;
			// 		var encryptedData = res.detail.encryptedData;
			// 		this.user_info = res.target.userInfo;
			// 		uni.login({
			// 			provider: 'weixin',
			// 			success: (res) => {
			// 				uni.showLoading({
			// 					title:'正在登录'
			// 				})
			// 				xcxLogin({
			// 					code : res.code,
			// 					iv:iv,
			// 					encryptedData:encryptedData
			// 				}).then((res)=>{
			// 					uni.hideLoading();
			// 					if(res.code) {
			// 						this.toast('登录成功');
			// 						this.show = false;
			// 						uni.setStorageSync('token',res.msg);
			// 						this.$emit('success');
			// 					} else {
			// 						this.toast('再次点击获取手机号');
			// 						this.user_info.openid_wechat = res.msg.openid;
			// 						this.user_info.unionid = res.msg.unionid;
			// 						this.session_key = res.msg.session_key;
			// 						this.get_mobile = true;
			// 					}
			// 				});
			// 			},
			// 			fail: () => {
			// 				this.toast('授权失败');
			// 				this.$emit('error')
			// 			}
			// 		})
			// 	}
			// }
		}
	}
</script>

<style>
	.uni-login-btn{
		display: flex;
	}
	.uni-login-btn > button{
		flex: 1;
		text-align: center;
		border-radius: 0;
		background: #FFFFFF;
		
	}
	.uni-login-btn > button::after{
		border: none;
	}
	.uni-login-btn > button.uni-login-btn-refuse{
		border-top: 1upx solid #f1f1f1;
	}
	.uni-login-btn > button.uni-login-btn-agree{
		background: #ff2842;
		color: #FFFFFF;
		border-top: 1upx solid #ff2842;
	}
	.uni-login-dian{
		display: inline-block;
		width: 16upx;
		height: 16upx;
		border-radius: 50%;
		background: #CCCCCC;
		margin-right: 10upx;
	}
	.uni-login-msg{
		width: 80%;
		text-align: left;
		margin:40upx auto;
		font-size: 28upx;
		color: #a1a1a1;
	}
	.uni-login-txt{
		width: 80%;
		text-align: center;
		margin: auto;
		overflow: hidden;
		height: 80upx;
		border-bottom: 1upx solid #f1f1f1;
	}
	.uni-login-logo{
		display: block;
		width: 160upx;
		height: 160upx;
		margin: auto;
	}
	.uni-login-title{
		text-align: center;
		height: 100upx;
		line-height: 100upx;
		border-bottom:1upx solid #f1f1f1;
	}
	.uni-login-box{
		position: fixed;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		transition: all 0.2s linear;
	}
	.uni-login-white{
		position: absolute;
		width: 70%;
		background: #FFFFFF;
		border-radius: 10upx;
		left: 15%;
		top:calc(50% - 250upx);
		overflow: hidden;
		box-shadow: 6upx 6upx 20upx rgba(26,26,26,0.3);
	}
</style>
